//内租调动
<template>
    <!-- 拟招标内容明细 -->
    <div id="detailCon" class="con">
        <div class="e-table">
            <div class="top">
                <div class="left">
                    <div>
                        <el-button
                            size="small"
                            style="background: #7aa818; color: #fff"
                            >导出</el-button
                        >
                        <el-button
                            size="small"
                            style="background: #7aa818; color: #fff"
                            >刷新</el-button
                        >
                    </div>
                </div>
                <div class="right">
                    <div>
                           <el-input placeholder="" size="small" v-model="pagination.keyWord"  @keydown.enter.native="fuzzySearchEnter" @blur="likeSearch">
                            <i slot="suffix" class="el-icon-search like" @click="likeSearch"></i>
                        </el-input>
                    </div>
                    <div>
                        <el-button
                            size="small"
                            style="background: #2e61d7; color: #fff"
                            >高级搜索</el-button
                        >
                    </div>
                </div>
            </div>
            <div style="padding: 20px 0">总库存量：xxx</div>
            <el-table
                :data="tableData"
                border
                style="width: 100%"
                :height="tableHeight"
                class="table"
                ref="table"
                v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
            >
                <el-table-column
                    fixed
                    prop="materialName"
                    label="物资名称"
                    width="200"
                    class-name="blue-column"
                >
                <template slot-scope="{row}">
                    <span @click="clickEdit(row.dtlId)">
                        {{
                            row.materialName
                        }}
                    </span>
                </template>
                </el-table-column>

                <el-table-column prop="spec" label="规格" width="100">
                </el-table-column>
                <el-table-column prop="unit" label="单位" width="100">
                </el-table-column>
                <el-table-column prop="texture" label="材质" width="100">
                </el-table-column>
                <el-table-column prop="warehouseName" label="仓库" width="150">
                </el-table-column>
                <el-table-column
                    prop="inventoryQuantity"
                    label="当前数量"
                    width="150"
                >
                </el-table-column>

                <el-table-column label="已外租数量" width="150">
                    <template slot-scope="scope">
                        <span>{{ scope.row.rentQuantity }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="internalLeaseQuantity"
                    label="已内租数量"
                    width="150"
                >
                </el-table-column>
                 <el-table-column prop="orgName" label="机构名称" min-width="250">
                </el-table-column>
            </el-table>
            <ComPagination
                :total="pagination.total"
                :pageSize.sync="pagination.limit"
                :currentPage.sync="pagination.page"
                @currentChange="getTableData"
                @sizeChange="getTableData"
                :class="{ bottomSetting }"
            />
        </div>
    </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination'
import { vueDom, debounce } from '@/utils/common.js'
export default {
    components: {
        ComPagination
    },

    data () {
        return {
            tableData: [],
            pagination: {
                keyWord: '',
                limit: 20,
                page: 1
            },
            totalPage: 0, //总页数
            bottomSetting: true, //是否添加样式
            stateArr: ['草稿', '审核中', '已审核', '已作废'],
            tableHeight: 0,
            fn: null
        }
    },
    created () {
        this.getTableData()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 240
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 240
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        getTableData () {
            this.$Ajax
                .httpPost({
                    url: '/turnover/realTimeInventory/listByEntity',
                    params: this.pagination
                })
                .then(res => {
                    this.tableData = res.list
                    this.pagination.total = res.totalCount
                })
        },
        //回车键查询
        fuzzySearchEnter (e) {
            if(e.keyCode == 13) {
                this.getTableData()
            }
        },
        //模糊查询
        likeSearch () {
            this.getTableData()
        },
        //点击进入查看页面
        tableDbShow (row, column) {
            const billid = row.billId
            if (column.label === '调动编号') {
                this.$router.push({
                    path: '/revolveInternalLeaseTransferShow',
                    query: { billid }
                })
            }
        },
        //点击修改的时候
        clickEdit (id) {
            this.$router.push({
                path: '/revolveRealTimeInventoryEdit',
                query: { id }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
#iconEdit:hover {
    color: blue;
}

.e-table {
    min-height: 97.3vh;
}
</style>
